<template>
  <div class="edu-page-warp">
    <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">跨院系选课设置(跨一级学科)</h1>
      <el-form
        :model="settingForm"
        ref="settingForm"
        label-position="right"
        label-width="125px"
        :rules="rules"
      >
        <el-row class="border-bottom" gutter="60">
          <el-col span="6">
            <el-form-item label="开启状态:">
              <el-switch
                v-model="settingForm.startStatus"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                active-text="开"
                inactive-text="关">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <span class="part-title">学分和门数限制</span>
          </el-col>
        </el-row>
        <el-row gutter="60">
          <el-col span="9" offset="1">
            <el-form-item label="专业门数限制上限:">
              <el-input-number v-model="settingForm.numMax" :step="1" :min="settingForm.numMin" :max="100"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="专业门数限制下限:">
              <el-input-number v-model="settingForm.numMin" :step="1" :min="1" :max="settingForm.numMax"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="60" class="border-bottom">
           <el-col span="9" offset="1">
            <el-form-item label="专业学分限制上限:">
              <el-input-number
                v-model="settingForm.creditsMax"
                :precision="1"
                :min="settingForm.creditsMin"
                :step="0.1"
                :max="50.0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="专业学分限制下限:">
              <el-input-number
                v-model="settingForm.creditsMin"
                :precision="1"
                :min="1.0"
                :step="0.1"
                :max="settingForm.creditsMax"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row gutter="60" class="border-bottom"> -->
          <!-- <el-col span="6">
						<el-form-item label="院系门数上限:">
							<el-input-number v-model="settingForm.num3" :min="settingForm.num4" :max="10" :step="2"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item label="院系门数下限:">
							<el-input-number v-model="settingForm.num4" :min="0" :max="settingForm.num3" :step="2"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item label="院系学分上限:">
							<el-input-number
								v-model="settingForm.num5"
								:precision="1"
								:step="0.1"
								:min="settingForm.num6"
								:max="10"
							></el-input-number>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item label="院系学分下限:">
							<el-input-number
								v-model="settingForm.num6"
								:precision="1"
								:step="0.1"
								:min="0"
								:max="settingForm.num5"
							></el-input-number>
						</el-form-item>
          </el-col>-->
        <!-- </el-row> -->
        <el-row>
          <el-col>
            <span class="part-title">跨院系对象限制(例外)</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="23">
            <el-form-item label="例外学生:">
              <el-button type="primary" @click="showSelectStudentBox = true">选择</el-button>
              <div class="tag-list-box">
                <el-tag
                  if="students"
                  size="mini"
                  :key="student.studentId"
                  v-for="student in students"
                  closable
                  @close="handleRemoveStudent(student.studentId)"
                >{{ student.name }}</el-tag>
              </div>
            </el-form-item>
          </el-col>
          <!-- <el-col>
						<el-form-item label="例外培养类别对应课程:">
							<el-button @click="showSelectCourseBox = true">选择</el-button>
							<div class="tag-list-box">
								<el-tag
									size="mini"
									:key="course.id"
									v-for="course in courses"
									closable
									@close="handleRemoveCourse(course.id)"
								>{{course.name}}</el-tag>
							</div>
						</el-form-item>
          </el-col>-->
        </el-row>
        <el-row gutter="60">
          <el-col span="12">
            <el-form-item label="国际学生:" prop="isOverseas">
              <el-select v-model="settingForm.isOverseas" style="width: 100%">
                <el-option
                  v-for="item in options.chinaSon"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="12" pull="1">
            <el-form-item label="港澳台:" prop="chinaSon">
              <el-select v-model="settingForm.chinaSon" style="width: 100%">
                <el-option
                  v-for="item in options.chinaSon"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="60">
          <el-col span="12">
            <el-form-item label="培养层次:" prop="trainingLevel">
              <el-select
                v-model="settingForm.trainingLevel"
                clearable
                style="width: 100%"
                placeholder="单选，全部研究生的培养层次,可空"
              >
                <!-- 全部字段特殊处理 -->
                <el-option label="全部" value="">全部</el-option>
                <el-option
                  v-for="item in options.trainingLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="12" pull="1">
            <el-form-item label="培养类别:" prop="trainingCategory">
              <el-select
                v-model="settingForm.trainingCategory"
                clearable
                style="width: 100%"
                placeholder="单选，全部研究生的培养类别,可空"
              >
                <el-option label="全部" value="">全部</el-option>
                <el-option
                  v-for="item in options.trainingCategory"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="60">
          <el-col span="12">
            <el-form-item label="学习形式:" prop="formLearning">
              <el-select
                v-model="settingForm.formLearning"
                clearable
                style="width: 100%"
                placeholder="单选，全部研究生的学习形式,可空"
              >
                <el-option label="全部" value="">全部</el-option>
                <el-option
                  v-for="item in options.formLearning"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="12" pull="1">
            <el-form-item label="学位类别:" prop="degreeType">
              <el-select
                v-model="settingForm.degreeType"
                clearable
                style="width: 100%"
                placeholder="单选，全部研究生的学位类别,可空"
              >
                <el-option label="全部" value="">全部</el-option>
                <el-option
                  v-for="item in options.degreeType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="60">
          <el-col span="24">
            <div class="text-right">
              <el-button type="primary" @click="addTable">添加</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="60" style="margin-top:30px;">
          <el-col span="22" offset="1">
            <el-table border size="mini" :data="settingForm.excludeListInfo">
              <el-table-column label="培养层次">
                <template slot-scope="scope">
                    <span v-if="scope.row.trainingLevel=== ''">全部</span>
                    <span v-else-if="scope.row.trainingLevel=== '6'">博士</span>
                    <span v-else>{{scope.row.trainingLevel}}</span>
                </template>
              </el-table-column>
              <el-table-column label="培养类别">
                <template slot-scope="scope">
                    <span v-if="scope.row.trainingCategory=== ''">全部</span>
                    <span v-else>{{scope.row.trainingCategory}}</span>
                </template>
              </el-table-column>
              <el-table-column label="学习形式">
                <template slot-scope="scope">
                    <span v-if="scope.row.formLearning === ''">全部</span>
                    <span v-else>{{scope.row.formLearning}}</span>
                </template>
              </el-table-column>
              <el-table-column label="学位类别">
                <template slot-scope="scope">
                    <span v-if="scope.row.degreeType=== ''">全部</span>
                    <span v-else>{{scope.row.degreeType}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="directionCode" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="deleteTable(scope.$index,settingForm.excludeListInfo)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <div class="text-right">
            <!-- <el-button @click="cancel">取消</el-button> -->
            <el-button type="primary" @click="submitForm">保存</el-button>
          </div>
        </el-row>
      </el-form>
    </el-card>
    <SelectStudent
      :is-show="showSelectStudentBox"
      v-on:change-visible="showSelectStudentBox = false"
      v-on:get-student="getStudent"
    />
    <SelectCourse
      :is-show="showSelectCourseBox"
      v-on:change-visible="showSelectCourseBox = false"
      v-on:get-courses="getCourses"
    />
  </div>
</template>
<script>
import {
  chooseCourseForCrossFaultySubmit,
  chooseCourseForCrossFaultyFind,
  findStudentInfoByIdList
} from "common/src/api/culture/culturePlan";
import { findStuInfoList } from "common/src/api/studentinfo";
import SelectStudent from "./SelectStudent";
import SelectCourse from "./SelectCourse";
import { queryDic, sortTrainingCategories } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import UTILS from "common/src/utils/utils";
export default {
  components: { SelectStudent, SelectCourse },
  data() {
    return {
      showSelectStudentBox: false,
      showSelectCourseBox: false,
      courses: [],
      students: [],
      settingForm: {
        startStatus: "1",
        creditsMax: 1,
        creditsMin: 1,
        numMax: 1,
        numMin: 1,
        trainingLevel: [],
        faculty: "",
        degreeType: [],
        spcialPlan: "",
        formLearning: [],
        degreeType: "",
        trainingCategory: [],
        isOverseas: "",
        chinaSon: "",
        excludeList: [],
        excludeListInfo: []
      },
      options: {
        // startStatus: [
        // 	{ label: "开启", value: "1" },
        // 	{ label: "关闭", value: "0" }
        // ],
        isOverseas: [
          { label: "限制", value: "0" },
          { label: "例外", value: "1" }
        ],
        chinaSon: [
          { label: "限制", value: "0" },
          { label: "例外", value: "1" }
        ],
        trainingLevel: [],
        faculty: [],
        degreeType: [],
        spcialPlan: [],
        formLearning: [],
        trainingCategory: []
      },
      fieldKeys: {
        trainingLevel: "X_PYCC",
        degreeCategory: "X_XWLB",
        spcialPlan: "X_ZXJH",
        formLearning: "K_XXXS",
        degreeType: "X_XWLX",
        // trainingCategory: "X_PYLB"
      },
      excludeList: [],
      keys: ["X_PYCC", "X_XWLB", "X_ZXJH", "K_XXXS", "X_XWLX", "X_PYLB"]
    };
  },
  mounted() {
    this.initOption();
    // this.getData();
  },
  methods: {
    initOption() {
      var _this = this;
      findFaculty().then(res => {
        let data = { X_YX: res.data };
        UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
      });
      var data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: this.keys
      };
      queryDic(data).then(res => {
        if (res.code === 200) {
          let params = {
                    lang: this.$store.getters.language,
                    keys: ["X_PYLB"]
                };
                sortTrainingCategories(params).then((res) => {
                    this.options.trainingCategory = res.data.X_PYLB;
                });
          // this.options = res.data;
          UTILS.fillSelect(this.fieldKeys, res.data, this.options);
          _this.getData();
        }
      });
    },
    //获取已设置信息
    getData() {
      var _this = this;
      chooseCourseForCrossFaultyFind()
        .then(res => {
          if (res.code == 200) {
            this.settingForm.startStatus = res.data.startStatus;
            this.settingForm.numMax = res.data.numMax;
            this.settingForm.numMin = res.data.numMin;
            this.settingForm.creditsMax = res.data.creditsMax;
            this.settingForm.creditsMin = res.data.creditsMin;
            this.settingForm.isOverseas = res.data.isOverseas;
            this.settingForm.chinaSon = res.data.chinaSon;
            for (let i = 0; i < res.data.excludeList.length; i++) {
              var json = {
                trainingLevel: res.data.excludeList[i].trainingLevel,
                trainingCategory: res.data.excludeList[i].trainingCategory,
                formLearning: res.data.excludeList[i].formLearning,
                degreeType: res.data.excludeList[i].degreeType
              };
              var jsonID = {
                trainingLevel: res.data.excludeList[i].trainingLevel,
                trainingCategory: res.data.excludeList[i].trainingCategory,
                formLearning: res.data.excludeList[i].formLearning,
                degreeType: res.data.excludeList[i].degreeType
              };
              _this.settingForm.excludeList.push(jsonID);
              _this.backfillValue(json);
            }
            if (res.data.trainingLevel && res.data.trainingLevel.length > 0) {
              this.settingForm.trainingLevel = res.data.trainingLevel.split(
                ","
              );
            }
            if (
              res.data.trainingCategory &&
              res.data.trainingCategory.length > 0
            ) {
              this.settingForm.trainingCategory = res.data.trainingCategory.split(
                ","
              );
            }
            if (res.data.formLearning && res.data.formLearning.length > 0) {
              this.settingForm.formLearning = res.data.formLearning.split(",");
            }
            if (res.data.degreeType && res.data.degreeType.length > 0) {
              this.settingForm.degreeType = res.data.degreeType.split(",");
            }
            if (res.data.studentId && res.data.studentId.length > 0) {
              //let studentId = res.data.studentId.split(",");
              // studentId.forEach(d => {
              //   this.queryStudents(d);
              // });
              this.queryStudents(res.data.studentId)
            }
          }
        })
        .catch(err => {
          console.log(error);
        });
    },
    //查询学生列表
    queryStudents(studentId) {
      let data = {
        pageSize_: 20,
        pageNum_: 1,
        studentId: studentId
      };
      findStudentInfoByIdList(data).then(response => {
        if (response.code == 200) {
          response.data.forEach(item=>{
            // this.students.push(response.data.list[0]);
            this.students.push(item);
          })
        }
      });
    },
    //添加
    addTable() {
      //校验培养层次,培养类别,学习形式,学位类别
      if (
        !this.settingForm.trainingLevel &&
        !this.settingForm.trainingCategory &&
        !this.settingForm.formLearning &&
        !this.settingForm.degreeType
      ) {
        this.$message({
          type: "error",
          message: "培养层次,培养类别,学习形式,学位类别四个至少选择一个!"
        });
        return;
      } else {
        var json = {
          trainingLevel: this.settingForm.trainingLevel,
          trainingCategory: this.settingForm.trainingCategory,
          formLearning: this.settingForm.formLearning,
          degreeType: this.settingForm.degreeType
        };
        // this.settingForm.excludeListInfo.push(jsonId);
        // 获取培养层次,培养类别,学习形式,学位类别id
        var jsonId = {
          trainingLevel: this.settingForm.trainingLevel,
          trainingCategory: this.settingForm.trainingCategory,
          formLearning: this.settingForm.formLearning,
          degreeType: this.settingForm.degreeType
        };
        this.settingForm.excludeList.push(jsonId);
        this.convertData(json);
      }
    },
    //转化为培养层次,培养类别,学习形式,学位类别值
    convertData(json) {
      var _this = this;
      _this.settingForm.degreeType &&
        this.options.degreeType.forEach(function(item) {
          if (_this.settingForm.degreeType == item.key) {
            json.degreeType = item.label;
          }
        });
      _this.settingForm.formLearning &&
        this.options.formLearning.forEach(function(item) {
          if (_this.settingForm.formLearning == item.key) {
            json.formLearning = item.label;
          }
        });
      _this.settingForm.trainingLevel &&
        this.options.trainingLevel.forEach(function(item) {
          if (_this.settingForm.trainingLevel == item.key) {
            json.trainingLevel = item.label;
          }
        });
      _this.settingForm.trainingCategory &&
        this.options.trainingCategory.forEach(function(item) {
          if (_this.settingForm.trainingCategory == item.key) {
            json.trainingCategory = item.label;
          }
        });
      _this.settingForm.trainingLevel = "";
      _this.settingForm.degreeType = "";
      _this.settingForm.formLearning = "";
      _this.settingForm.trainingCategory = "";
      let flag = true;
      this.settingForm.excludeListInfo.forEach(s=>{ 
        const isEq=Object.is(s.trainingLevel,json.trainingLevel)&&Object.is(s.trainingCategory,json.trainingCategory)&&Object.is(s.formLearning,json.formLearning)&&Object.is(s.degreeType,json.degreeType);
         console.log(isEq)
        if(isEq){
          this.$message({
            type: "error",
            message: "培养层次,培养类别,学习形式,学位类别已有重复!"
          });
          flag=false;
        }
      });
      if(flag){
        this.settingForm.excludeListInfo.push(json);
      }
      
    },
    //培养层次,培养类别,学习形式,学位类别回填值
    backfillValue(json) {
      var _this = this;
      _this.options.degreeType.forEach(function(item) {
        if (json.degreeType == item.key) {
          json.degreeType = item.label;
          _this.settingForm.degreeType = "";
        }
      });
      _this.options.formLearning.forEach(function(item) {
        if (json.formLearning == item.key) {
          json.formLearning = item.label;
          _this.settingForm.formLearning = "";
        }
      });
      _this.options.trainingLevel.forEach(function(item) {
        if (json.trainingLevel == item.key) {
          json.trainingLevel = item.label;
          _this.settingForm.trainingLevel = "";
        }
      });
      _this.options.trainingCategory.forEach(function(item) {
        if (json.trainingCategory == item.key) {
          json.trainingCategory = item.label;
          _this.settingForm.trainingCategory = "";
        }
      });
      _this.settingForm.excludeListInfo.push(json);
    },
    //删除
    deleteTable(index, rows) {
      rows.splice(index, 1);
      this.settingForm.excludeList.splice(index, 1);
    },
    getStudent(curStudents) {
      curStudents.forEach(ele => {
        let flag = this.students.some(i => {
          return i.studentId == ele.studentId;
        });
        if (!flag) this.students.push(ele);
      });
      this.showSelectStudentBox = false;
    },
    getCourses(curCourses) {
      curCourses.forEach(ele => {
        let flag = this.courses.some(i => {
          return i.id == ele.id;
        });
        if (!flag) this.courses.push(ele);
      });
    },
    handleRemoveStudent(studentId) {
      this.students = this.students.filter(ele => {
        return ele.studentId != studentId;
      });
    },
    handleRemoveCourse(id) {
      this.courses = this.courses.filter(ele => {
        return ele.id != id;
      });
    },
    submitForm() {
      let settingForm = {};
      let student = [];
      settingForm.startStatus = this.settingForm.startStatus;
      settingForm.numMax = this.settingForm.numMax;
      settingForm.numMin = this.settingForm.numMin;
      settingForm.creditsMax = this.settingForm.creditsMax;
      settingForm.creditsMin = this.settingForm.creditsMin;
      settingForm.excludeList = this.settingForm.excludeList;
      //校验专业门数和专业学分
      var flag = false;
      if (!this.settingForm.creditsMax) {
        this.$message({
          type: "error",
          message: "专业学分限制上限不能为空！",
          duration: 2000
        });
        flag = true;
      }
      if (!this.settingForm.creditsMin) {
        this.$message({
          type: "error",
          message: "专业学分限制下限不能为空！",
          duration: 2000
        });
        flag = true;
      }
      if (!this.settingForm.numMax) {
        this.$message({
          type: "error",
          message: "专业门数限制上限不能为空！",
          duration: 2000
        });
        flag = true;
      }
      if (!this.settingForm.numMin) {
        this.$message({
          type: "error",
          message: "专业门数限制下限不能为空！",
          duration: 2000
        });
        flag = true;
      }
      if (this.settingForm.numMax <= this.settingForm.numMin) {
        this.$message({
          type: "error",
          message: "专业门数限制上限必须大于专业门数限制下限!",
          duration: 2000
        });
        flag = true;
      }
      if (this.settingForm.creditsMax <= this.settingForm.creditsMin) {
        this.$message({
          type: "error",
          message: "专业学分限制上限必须大于专业学分限制下限!",
          duration: 2000
        });
        flag = true;
      }
      if (flag) {
        return;
      }
      if (this.settingForm.isOverseas) {
        settingForm.isOverseas = this.settingForm.isOverseas;
      }
      if (this.settingForm.chinaSon) {
        settingForm.chinaSon = this.settingForm.chinaSon;
      }
      if (this.students && this.students.length > 0) {
        if (this.students.length > 100) {
          this.$message({
            type: 'warning',
            message: '当前最多选择100个学生，请重新选择',
          })
          return
        }else{
          this.students.forEach(d => {
            student.push(d.studentId);
          });
          settingForm.studentId = student.toString();
        }
      }
      chooseCourseForCrossFaultySubmit(settingForm)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "设置成功"
            });
          }
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: "设置失败"
          });
        });
    }
  },
  watch:{
    students(newVal, oldVal){
      if (newVal.length > 100) {
        this.$message({
          type: 'warning',
          message: '当前最多选择100个学生，请重新选择',
        })
        return
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.part-title {
  display: block;
  line-height: 51px;
  font-size: 14px;
  color: #000;
}
.el-tag {
  margin-right: 10px;
}
.tag-list-box {
  margin-top: 8px;
  border: 1px solid #ccc;
  padding-left: 8px;
  min-height: 64px;
}
.div-main {
  margin-bottom: 16px;
}
</style>
